{extend name="base" /}
{block name="title"}房卡充值{/block}
{block name="head"}
<style>
.weui_panel_hd:after {left:0;}
.weui-payselect-ul {margin-top:0; overflow:visible;}
.weui_cells {margin-top:15px;}
a.weui-payselect-a {position:relative;}
a.weui-payselect-a span.weui-badge {position:absolute; right:-10px; top:-8px;}
.weui_panel_ft:before {left:0}
</style>
{/block}
{block name="body"}

<div class="weui_panel ms-controller" ms-controller="PAY">

  <div class="weui_panel_hd">
    <div class="weui-flex">
      <div class="weui-flex-item">房卡数量: {{@RoomCard|number(0,'','')}}</div>
      <div class="weui-flex-item">今日销量: {{@TotalToday|number(0,'','')}}</div>
    </div>
    <div class="weui-flex">
      <div class="weui-flex-item">本周销量: {{@TotalWeek|number(0,'','')}}</div>
      <div class="weui-flex-item">本月销量: {{@TotalMonth|number(0,'','')}}</div>
    </div>
  </div>

  <div class="weui_panel_bd">
  
    <div class="weui_cells weui_cells_form">
      <div ms-class="['weui_cell', @GameID.length>6 && 'weui_cell_warn']">
        <div class="weui_cell_hd"><label for="yxid" class="weui_label">玩家游戏ID</label></div>
        <div class="weui_cell_bd weui_cell_primary">
          <input class="weui_input" id="yxid" type="number" placeholder="请输6位游戏ID" ms-duplex="@GameID" />
        </div>
        <div class="weui_cell_ft"><i class="weui_icon_warn"></i></div>
      </div>
    </div>
  
    <div class="weui-pay">
      <ul class="weui-payselect-ul">
        <li class="weui-payselect-li" ms-for="(k,v) in @card">
          <a ms-class="['weui-payselect-a', @curr==k&&'weui-payselect-on']" ms-on-tap="@tapCard(k)">{{v.RMB}}元<span class="weui-pay-12">{{v.Coin}}</span><span class="weui-badge" ms-if="v.Zeng>0">赠{{v.Zeng}}</span></a>
        </li>
      </ul>
      <a class="weui_btn weui_btn_primary clear" ms-on-tap="@tapPay">确认充值</a>
    </div>
    
  </div>
  <div class="weui_panel_bd">
    <table class="weui-table" >
      <thead>
        <tr><th>GameID</th><th>用户</th><th>房卡</th><th>时间</th></tr>
      </thead>
      <tbody>
        <tr ms-if="@rows.length<=0"><td colspan="4">Oh~暂无数据!</td></tr>
        <tr ms-if="@rows.length>0" ms-for="(k,v) in @rows">
          <td>{{v.GameID}}</td>
          <td>{{v.NickName|truncate(8)}}</td>
          <td class="f-red">+{{v.RoomCard}}</td>
          <td>{{v.CollectDate|date('MM/dd HH:mm')}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="weui_panel_ft" style="padding:0">
    <div class="weui-flex pager">
      <a class="weui-flex-item" ms-on-tap="@tapFirst">首页</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapPre">上一页</a>
      <a class="weui-flex-item weui-border-l">{{@total}}#{{@page}}/{{@totalPage}}</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapNext">下一页</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapEnd">尾页</a>
    </div>
  </div>
</div>

{/block}
{block name="foot"}
<script>
avalon.ready(function () {

  var vm = avalon.define({
    $id: "PAY",
    card: {:json_encode($info.CARDS??[], JSON_UNESCAPED_UNICODE)},
    RoomCard: "{$info.RoomCard|default=0}",
    TotalToday: "{$info.Today|default=0}",
    TotalWeek: "{$info.Week|default=0}",
    TotalMonth: "{$info.Month|default=0}",
    curr: 0,
    GameID: '',
    page: "{$page??1}" * 1, // 当前第几页
    size: "{$size??10}" * 1,  // 每页几条
    total: "{$total??0}" * 1, // 总共几条
    rows: {:json_encode($rows??[], JSON_UNESCAPED_UNICODE)},
    $computed: {
      totalPage: {
        get: function () {
          var max = Math.ceil(this.total / this.size); // 最大页数=向上取整
          max = max > 0 ? max : 1;
          return max;
        }
      }
    },
    ajaxPage: function (page) {
      $.req({
        url: "{:url('pay')}",
        data: {
          page: page
        },
        success: function (resp, status, xhr) {
          avalon.log(resp);
          if (resp.errno == 0) {
            vm.page = resp.data.page * 1;
            vm.size = resp.data.size * 1;
            vm.total = resp.data.total * 1;
            vm.rows.removeAll();
            vm.rows.pushArray(resp.data.rows);
            vm.RoomCard = resp.data.info.RoomCard;
            vm.TotalToday = resp.data.info.Today;
            vm.TotalWeek = resp.data.info.Week;
            vm.TotalMonth = resp.data.info.Month;
          }
        }
      });
    },
    tapFirst: function () {
      avalon.log("tapFirst");
      this.ajaxPage(1);
      return false;
    },
    tapPre: function () {
      avalon.log("tapPre");
      var page = this.page - 1;
      page = page > 0 ? page : 1;
      this.ajaxPage(page);
      return false;
    },
    tapNext: function () {
      avalon.log("tapNext");
      var page = this.page + 1;
      page = page > this.totalPage ? this.totalPage : page;
      this.ajaxPage(page);
      return false;
    },
    tapEnd: function () {
      avalon.log("tapEnd");
      this.ajaxPage(this.totalPage);
      return false;
    },
    tapCard: function (idx) {
      this.curr = idx;
    },
    tapPay: function () {
      if (this.card.length <= 0) {
        return $.alert('面额未定义');
      }
      var card = this.card[this.curr];
      var aa = this.RoomCard * 1;
      var bb = card.Coin * 1;
      avalon.log(aa, bb);
      if (aa < bb) {
        $.alert('您的房卡数量少于转帐数量');
        return false;
      }
      var cc = this.GameID + '';
      if (cc.length != 6) {
        $.alert('请输入正确游戏ID');
        return;
      }
      $.confirm("你确定要给[" + cc + "]转账吗?", function () {
        $.req({
          url: "{:url('pay2')}",
          data: {
            GameID: cc,
            CardID: card.ID
          },
          // context: this,
          success: function (resp, status, xhr) {
            avalon.log(resp);
            $.alert(resp.error);
            if (resp.errno == 0) {
              vm.RoomCard = resp.data.RoomCard;
              vm.TotalToday = resp.data.Today;
              vm.TotalWeek = resp.data.Week;
              vm.TotalMonth = resp.data.Month;
            }
          }
        });
      });
    }
  });
  avalon.log(JSON.parse(JSON.stringify(vm)));
  avalon.scan(document.body);
});
</script>
{/block}